<template>
  <div class="goods">

    <ul class="mui-table-view">
      <li v-for="item in goodsList" :key="item.id" class="mui-table-view-cell mui-media">
        <a href="javascript:;">
          <img class="mui-media-object mui-pull-left" src="/static/images/cbd.jpg">
          <div class="mui-media-body">
            <h1>{{item.name}}</h1>
            <p>商品描述:商品id为 {{item.id}},商品描述:商品id为 {{item.id}},商品描述:商品id为 {{item.id}}商品描述:商品id为
              {{item.id}}</p>
            <p class='mui-ellipsis'>
              <span>价格:<span>¥15</span></span>
              <span>订单人数:1200</span>
            </p>
            <numbox></numbox>
          </div>
        </a>
      </li>
    </ul>

  </div>
</template>

<script>
  import numbox from "./NumberBox";

  export default {
    name: 'Goods',
    data() {
      return {
        groupId: '',
        goodsList: '',
      }
    },
    methods: {
      /*根据商品分类id,查询商品*/
      getGoodsByGroupId() {
        this.groupId = this.$route.params.id;
        this.$http.get("/static/json_file/GoodsGroup" + this.$route.params.id + ".json").then(res => {
          this.goodsList = res.body;
        });
       //TODO 请求后台,根据商品分组id,获取商品
      }
    },
    created() {
      this.getGoodsByGroupId();
    },
    /*监听路由参数的变换*/
    watch: {
      // 如果路由有变化，会再次执行该方法
      "$route": "getGoodsByGroupId",
    },
    components: {
      numbox
    }
  }
</script>

<style scoped>
  .mui-media-body p {
    height: 35px;
    line-height: 35px;
  }

  .mui-ellipsis {
    font-size: 12px;
    display: flex;
    justify-content: space-between;
  }

  .mui-ellipsis span span {
    font-size: 18px;
    color: red;
  }

  .mui-table-view .mui-media-object {
    line-height: 42px;
    max-width: 140px;
    height: 133px;
  }

  .mui-table-view h1 {
    font-size: 18px;
  }
</style>
